在 iOS App 中如果想要繪製各式圖表的話，除了自己手刻外
也可以透過第三方套件－Charts 來幫你產生各式圖表

Charts 套件作者 Github 連結 (點我前往)

那要如何安裝 Charts 套件呢
Charts 本身提供了「CocoaPods、Carthage、Swift Package Manager」這三種安裝方式
這邊我選擇使用 CocoaPods 來安裝～如果不知道如何使用的話，可以先去看去年我寫的這篇～
【在 iOS 開發路上的大小事－Day11】透過 CocoaPods 來管理第三方套件

安裝完 CocoaPods 後，就要來裝套件了～
打開 Podfile，然後輸入「pod 'Charts', '4.0.2'」，像是下面這樣
這邊會在套件名稱後面，多寫套件版本是因為要做版本控制的關係
不寫的話，pod 會自動去裝最新版的套件

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'ChartsDemo' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!
	pod 'Charts', '4.0.2'
  # Pods for ChartsDemo
end

裝好後，就開始來動工吧！
成品圖的 UI 長得像是下面這樣 ↓

那就開始設計 UI 吧～

設計步驟：
1. 拉一個 UIView，並設好 AutoLayout
2. 將這個 UIView 的 class 改為 LineChartView
3. 拉好 @IBOutlet

至於上面那塊 NavigationBar 的顏色，我是寫在 BaseViewController.swift 裡面，不改也沒關係的～
至於下面那塊 Footer，我是自己另外拉的，不拉也沒關係的～

重點程式碼～

首先要 import Charts，不然 Xcode 可是不認識 LineChartView 是什麼東西呢

import Charts

再來是 @IBOutlet

class LineChartViewVC: UIViewController {
    
    @IBOutlet weak var lineChartView: LineChartView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

    }
}

接著就來給這個折線圖一點資料吧
先宣告一個 折線圖的資料陣列 吧

var lineChartViewDataEntries1: [ChartDataEntry] = [] // 折線圖資料陣列

接著再給這個資料陣列一點資料

// MARK: Line Chart View Data Input

func lineChartViewDataInput() {
    lineChartViewDataEntries1 = [
        ChartDataEntry.init(x: 0.0, y: 0.0),
        ChartDataEntry.init(x: 1.0, y: 2.0),
        ChartDataEntry.init(x: 2.0, y: 4.0),
        ChartDataEntry.init(x: 3.0, y: 6.0),
        ChartDataEntry.init(x: 4.0, y: 8.0),
        ChartDataEntry.init(x: 5.0, y: 10.0),
        ChartDataEntry.init(x: 6.0, y: 3.0),
        ChartDataEntry.init(x: 7.0, y: 3.5),
        ChartDataEntry.init(x: 8.0, y: 4.0),
        ChartDataEntry.init(x: 9.0, y: 4.5)
    ]
}

資料給完之後，就要來設定這個折線圖的一些配置了

// MARK: Line Chart View Configuration

func lineChartViewConfiguration() {
    let chartDataSet1 = LineChartDataSet.init(entries: lineChartViewDataEntries1, label: "")
    chartDataSet1.colors = [.red, .green, .blue, .orange, .systemPink]
    chartDataSet1.lineWidth = 3 // 設定第一組資料的折線寬度
    chartDataSet1.drawCirclesEnabled = false // 第一組資料點的內、外圓都不顯示
    chartDataSet1.drawValuesEnabled = false // 第一組資料點的值在折線上都不顯示
    chartDataSet1.mode = .horizontalBezier // 將第一組資料點的折線模式設為水平貝茲曲線
    chartDataSet1.highlightEnabled = false // 關閉點擊後的十字線

    let chartData = LineChartData.init(dataSet: chartDataSet1)
    lineChartView.data = chartData
    lineChartView.drawBordersEnabled = false // 繪製 lineChartView 邊框
    lineChartView.legend.form = .none // 不顯示圖例
    lineChartView.scaleXEnabled = false // 關閉 x 軸縮放
    lineChartView.scaleYEnabled = false // 關閉 y 軸縮放
    lineChartView.doubleTapToZoomEnabled = false // 關閉雙擊縮放
    lineChartView.xAxis.drawGridLinesEnabled = false // 取消垂直網格線
    lineChartView.xAxis.labelPosition = .bottom // 將 x 軸座標數值設在底部
    lineChartView.xAxis.labelCount = lineChartViewDataEntries1.count // 設定全部的 x 軸值的數量
    lineChartView.xAxis.granularity = 1 // 設定 x 軸值的間隔
    lineChartView.leftAxis.drawAxisLineEnabled = false // 不顯示左側 y 軸的線
    lineChartView.rightAxis.enabled = false // 取消右側座標
    lineChartView.rightAxis.drawAxisLineEnabled = false // 不顯示右側 y 軸的線
}

最終的完整程式碼～

import UIKit
import Charts

class LineChartViewVC: BaseViewController {

    @IBOutlet weak var lineChartView: LineChartView!
    @IBOutlet weak var customFooterView: CustomFooterView!
    
    var lineChartViewDataEntries1: [ChartDataEntry] = [] // 折線圖資料陣列
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupNavigationBarStyle(backgroundColor: .systemPink, tintColor: .white, foregroundColor: .white)
        self.title = "Line Chart View"
        customFooterView.setBackgroundColor(bgColor: .systemPink)
        setupLineChartView()
    }
    
    // MARK: - Setting Line Chart View
    
    func setupLineChartView() {
        lineChartViewDataInput()
        lineChartViewConfiguration()
    }
    
    // MARK: Line Chart View Data Input
    
    func lineChartViewDataInput() {
        lineChartViewDataEntries1 = [
            ChartDataEntry.init(x: 0.0, y: 0.0),
            ChartDataEntry.init(x: 1.0, y: 2.0),
            ChartDataEntry.init(x: 2.0, y: 4.0),
            ChartDataEntry.init(x: 3.0, y: 6.0),
            ChartDataEntry.init(x: 4.0, y: 8.0),
            ChartDataEntry.init(x: 5.0, y: 10.0),
            ChartDataEntry.init(x: 6.0, y: 3.0),
            ChartDataEntry.init(x: 7.0, y: 3.5),
            ChartDataEntry.init(x: 8.0, y: 4.0),
            ChartDataEntry.init(x: 9.0, y: 4.5)
        ]
    }
    
    // MARK: Line Chart View Configuration
    
    func lineChartViewConfiguration() {
        let chartDataSet1 = LineChartDataSet.init(entries: lineChartViewDataEntries1, label: "")
        chartDataSet1.colors = [.red, .green, .blue, .orange, .systemPink]
        chartDataSet1.lineWidth = 3 // 設定第一組資料的折線寬度
        chartDataSet1.drawCirclesEnabled = false // 第一組資料點的內、外圓都不顯示
        chartDataSet1.drawValuesEnabled = false // 第一組資料點的值在折線上都不顯示
        chartDataSet1.mode = .horizontalBezier // 將第一組資料點的折線模式設為水平貝茲曲線
        chartDataSet1.highlightEnabled = false // 關閉點擊後的十字線
        
        let chartData = LineChartData.init(dataSet: chartDataSet1)
        lineChartView.data = chartData
        lineChartView.drawBordersEnabled = false // 繪製 lineChartView 邊框
        lineChartView.legend.form = .none // 不顯示圖例
        lineChartView.scaleXEnabled = false // 關閉 x 軸縮放
        lineChartView.scaleYEnabled = false // 關閉 y 軸縮放
        lineChartView.doubleTapToZoomEnabled = false // 關閉雙擊縮放
        lineChartView.xAxis.drawGridLinesEnabled = false // 取消垂直網格線
        lineChartView.xAxis.labelPosition = .bottom // 將 x 軸座標數值設在底部
        lineChartView.xAxis.labelCount = lineChartViewDataEntries1.count // 設定全部的 x 軸值的數量
        lineChartView.xAxis.granularity = 1 // 設定 x 軸值的間隔
        lineChartView.leftAxis.drawAxisLineEnabled = false // 不顯示左側 y 軸的線
        lineChartView.rightAxis.enabled = false // 取消右側座標
        lineChartView.rightAxis.drawAxisLineEnabled = false // 不顯示右側 y 軸的線
    }
}

本篇的參考範例程式碼：Github

參考資料

https://www.hangge.com/blog/cache/detail_2116.html